<!-- 单选答案 -->
<template>
	<view>
		<radio-group @change="change(item.choiceId,$event)" v-for="(item,index) in choices" :item="item" :key="item.choiceId">
			<label :class="[item.isChose=='0'?'unselected':'selected']">
				<radio style="transform: scale(0.7)" :checked="index === current || item.isChose=='1'" :value="item.choiceDesc" />
				<text style="margin-top: 4px;">{{item.choiceId}}、{{item.choiceDesc}}</text>
			</label>
			<auto-img v-if="item.choiceType=='2'" :src="item.contentUrl"></auto-img>
			<audio v-if="item.choiceType=='4'" :src="item.contentUrl"></audio>
			<video v-if="item.choiceType=='3'" :src="item.contentUrl"></video>
		</radio-group>
		<!-- <choice-item v-for="item in choices" :item="item" :key="item.choiceId" @change="change"></choice-item> -->
	</view>
</template>

<script>
	import AutoImg from './AutoImg';
	export default {
		components: {
			AutoImg
		},
		props: {
			choices: {
				type: Array,
				default () {
					return [];
				}
			},
		},
		data() {
			return {
				current: -1
			}
		},
		watch: {
			choices() {
				this.current = this.choices.length

			}
		},
		methods: {
			change(choiceId, evt) {
				for (let i = 0; i < this.choices.length; i++) {
					if (this.choices[i].choiceDesc === evt.target.value) {
						this.current = i;
						break;
					}
				}
				const value = [choiceId]
				this.$emit('change', value);


			}
		}
	}
</script>

<style lang="scss" scoped>
	.unselected {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: flex-start;
		margin: 20upx 0;
		padding: 30upx 20upx;
		font-size: 26upx;
		background: #f4f6f8;
		border-radius: 8rpx;
		color: #000;
	}

	.selected {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: flex-start;
		margin: 20upx 0;
		padding: 30upx 20upx;
		font-size: 26upx;
		background: #5ea1f8;
		color: #fff;
		border-radius: 8rpx;
	}
</style>
